<template>
    <div class="header-pages">
        <header class="header">
            <a class="logo" href="/"><img src="../../assets/images/logo.png"/></a>
            <a class="menu iconfont icon-menu" id="menu" href="javascript:;" @click="menuBtn"></a>
        </header>
        <nav class="navigate-body" js-plugin="slide" data-direction="vertical" id="navigate" :style="{ transform: navStyle }">
            <div class="navigate" data-number="0" @click="menuClose">
                <a class="items login" @click='toUser'>
                    <i class="icon iconfont icon-gerenzhongxin"></i>
                    <span class="txt js-navLogin">{{ txt }}</span>
                </a>
                <router-link class="items" to='/'>
                    <i class="icon iconfont icon-home"></i>
                    <span class="txt">首页</span>
                </router-link>
                <router-link class="items" to="/houseList/0">
                    <i class="icon iconfont icon-newhouse"></i>
                    <span class="txt">租厂房</span>
                </router-link>
                <router-link class="items" to="/houseList/1">
                    <i class="icon iconfont icon-rent"></i>
                    <span class="txt">买厂房</span>
                </router-link>
                <router-link class="items" to="/landList">
                    <i class="icon iconfont icon-quanbuloupan"></i>
                    <span class="txt">买土地</span>
                </router-link>
                <a class="items" href="javascript:void(0)" @click="layerOpen">
                    <i class="icon iconfont icon-newhouse"></i>
                    <span class="txt">发布厂房</span>
                </a>
                <router-link class="items" to="/news/detail/1">
                    <i class="icon iconfont icon-about"></i>
                    <span class="txt">联系我们</span>
                </router-link>
            </div>
        </nav>
        <div class="overlay" v-if="menuOpen" @click="menuClose"></div>
        <div class="alert-wrap" v-if="layerIsOpen">
            <div class="layer-shade"></div>
            <div class="layer-main">
              <div class="layer-section">
                  <div class="layer-child">
                    <h1>发布厂房</h1>
                    <div class="layer-close" @click="layerClose"></div>
                    <div class="layer-icon">
                        <img src="../../assets/images/failure.png">
                        <p>抱歉，手机端暂不支持厂房信息发布， <br/>请留下您的联系方式，我们免费为您发布！</p>
                    </div>
                    <div class="layer-content">
                        <div><input type="text" placeholder="请输入你的称呼" v-model="puser"></div>
                        <div><input type="text" placeholder="请输入手机号码" v-model="pmobile"></div>
                        <div>
                          <input type="text" placeholder="请输入验证码" class="special" v-model="pcode">
                          <button type="button" :disabled="disabled" @click="getCode">{{ btntxt }}</button>
                        </div>
                    </div>
                    <p class="perror">{{perror}}</p>
                    <a class="publish-btn" href="javascript:void(0)" @click="pLogin">提交</a>
                  </div>
                </div>
            </div>
        </div>
        <alert :message='message' v-if="openMessage" @closeBtn="closeMessage"></alert>
    </div>
</template>
<script>
    import alert from './alert'
    export default {
        data() {
            return {
                menuOpen: false,
                navStyle: 'translateX(100%)',
                txt:'登录/注册',
                layerIsOpen:false,
                puser:'',
                pmobile:'',
                pcode:'',
                perror:'',
                disabled:false,
                btntxt:'获取验证码',
                openMessage:false,
                message:''
            };
        },
        components:{alert},
        created(){
            if(localStorage.getItem('token1')){
                this.txt = '已登录'
            }else{
                this.txt = '登录/注册'
            }
        },
        methods: {
            menuBtn() {
                this.menuOpen = true;
                this.navStyle = 'translate3d(0px, 0px, 0px)';
            },
            menuClose() {
                this.filter = false;
                this.menuOpen = false;
                this.orederby = 'none';
                this.navStyle = 'translateX(100%)';
            },
            getTitle(val) {
                this.title = val;
            },
            toUser(){
                if (localStorage.getItem('token1')) {
                    // this.$router.push('/user')
                }else{
                    this.$router.push('/login')
                }
            },
            layerOpen(){
              this.layerIsOpen = true
              this.menuOpen = false
              this.navStyle = 'translateX(100%)';
            },
            layerClose(){
              this.layerIsOpen = false
            },
            getCode(){
            var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
                if(this.pmobile == '') {
                  this.perror = '手机号不能为空'
                }else if(!reg.test(this.pmobile)){
                  this.perror = '手机格式不正确'
                }else{
                  this.perror='';
                  this.$post('/api/sendVerifyCode',{mobile:this.pmobile}).then(res=>{
                    if(res.code == 0){
                        this.time = 60;
                        this.disabled = true;
                        this.timer();
                    }else{
                        this.perror = res.data
                    }
                })                
            }
           },
           timer(){
              if(this.time>0){
                this.time--;
                this.btntxt=this.time+'s';
                setTimeout(this.timer,1000);
              }else{
                this.time=0;
                this.btntxt='获取验证码';
                this.disabled=false;
              }
            },
            pLogin(){
                if(this.puser == ''){
                    this.perror = '称呼不能为空'
                }else if(this.pmobile == ''){
                    this.perror = '手机号不能为空'
                }else if(this.pcode == ''){
                    this.perror = '验证码不能为空'
                }else{
                    this.$post('/api/releaseLogin',{mobile:this.pmobile,code:this.pcode,name:this.puser}).then(res=>{
                        if(res.code == 0){
                            this.layerIsOpen = false
                            this.openMessage = true
                            this.message = '提交成功'
                        }else{
                            this.perror = res.data
                        }
                    })
                }
            },
             closeMessage(){
                this.openMessage = false
            }
        }
    };
</script>

<style scoped>
 /*@import '../../assets/css/sale-list.css';*/
 .header {background-color: #0a133f;color: #fff;padding: 0 15px;overflow: hidden;height: 50px;}
 .header .logo {float: left;padding: 12px 0;}
 .header .logo img {display: block;height: 26px;width: auto;}
 .header .menu {float: right;color: #fff;font-size: 18px;line-height: 1;padding: 15px 0;}

 .navigate-body {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 45%;
     z-index: 5000;
     background-color: #fff;
     overflow: hidden;
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
     transform: translateX(100%)
 }

 .navigate-body .items {
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
     padding: 12px 30px;
     font-size: 16px;
     color: #333;
     line-height: 1.2;
     box-sizing: border-box
 }

 .navigate-body .items .icon {
     display: block;
     margin-right: 15px;
     font-size: 20px;
     color: #b2b2b2
 }

 .navigate-body .items .icon:before {
     display: block;
     width: 20px;
     height: 20px;
     overflow: hidden
 }

 .navigate-body .items .txt {
     display: block
 }

 .navigate-body .login, .navigate-body .user {
     margin-bottom: 20px;
     padding: 20px 30px;
     border-bottom: 1px solid #f0f0f0
 }

 .navigate-body .user .pic {
     display: block;
     width: 40px;
     height: 40px;
     margin-right: 10px;
     border-radius: 50%;
     overflow: hidden
 }
 .overlay {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1000;
     display: block !important;
     background-color: rgba(0, 0, 0, .3)
 }
 .layer-shade{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0,0.3);
  }
  .layer-main{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: table;
    z-index: 1001;
  }
  .layer-section{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .layer-child{
    position: relative;
    display: inline-block;
    width: 90%;
    max-width: 640%;
    background-color: #fff;
    border-radius: 5px;
    font-size: 14px;
    padding-bottom: 20px;
  }
  .layer-child h1{
    font-size: 20px;
    padding: 15px 0;
    font-weight: bold;
    border-bottom: 1px solid #e7e7e7;
  }
  .layer-icon{
    margin-top: 15px;
    text-align: center;
  }
  .layer-icon img{
    display: inline-block;
    width: 55px;
    height: 55px;
  }
  .layer-icon p{
    font-size: 16px;
    color: #333;
    line-height: 20px;
    margin-top: 8px;
  }
  .layer-content{
    margin-top: 30px;
    padding: 0 6%;
  }
  .layer-content input{
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    height: 42px;
    line-height: 40px;
    font-size: 14px;
    color: #ababab;
    border: 1px solid #e7e7e7;
    outline: none;
    margin-bottom: 10px;
    border-radius: 3px;
  }
  .layer-content div{
    overflow: hidden;
  }
  .layer-content input.special{
    float: left;
    width: 65%;
  }  
  .layer-content button{
    float: right;
    width: 30%;
    height: 42px;
    line-height: 40px;
    font-size: 14px;
    color: #e6222a;
    border: 1px solid #e6222a;
    outline: none;
    background-color: #fff;
    border-radius: 3px;
  }
  .publish-btn{
    display: block;
    margin:15px 6% 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 3px;
    background-color: #e6222a;
    font-size: 16px;
    color: #fff;
  }
  .layer-close{
    position: absolute;
    top: 15px;
    right: 15px;
    width: 16px;
    height: 16px;
    background:url(../../assets/images/close.png) 0 0 no-repeat; 
    background-size: 16px 16px;
  }
  .perror{
    padding: 0 6%;
    height: 20px;
    font-size: 16px;
    color: #e6222a;
    text-align: left;
  }
</style>

